import React from 'react';
import { NavLink } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
import { 
  FaHome, 
  FaDatabase, 
  FaUsers, 
  FaHistory, 
  FaUsersCog 
} from 'react-icons/fa';
import '../styles/Sidebar.css';

const Sidebar = () => {
  const { user } = useAuth();
  const isAdmin = user?.role === 'admin';

  return (
    <aside className="sidebar">
      <div className="sidebar-content">
        <ul className="nav-links">
          <li>
            <NavLink to="/dashboard" className={({ isActive }) => isActive ? 'active' : ''}>
              <FaHome className="icon" />
              <span>仪表盘</span>
            </NavLink>
          </li>
          
          <li>
            <NavLink to="/sources" className={({ isActive }) => isActive ? 'active' : ''}>
              <FaDatabase className="icon" />
              <span>采集源管理</span>
            </NavLink>
          </li>
          
          <li>
            <NavLink to="/personnel" className={({ isActive }) => isActive ? 'active' : ''}>
              <FaUsers className="icon" />
              <span>人员信息</span>
            </NavLink>
          </li>
          
          <li>
            <NavLink to="/changelog" className={({ isActive }) => isActive ? 'active' : ''}>
              <FaHistory className="icon" />
              <span>变更日志</span>
            </NavLink>
          </li>
          
          {isAdmin && (
            <li>
              <NavLink to="/users" className={({ isActive }) => isActive ? 'active' : ''}>
                <FaUsersCog className="icon" />
                <span>用户管理</span>
              </NavLink>
            </li>
          )}
        </ul>
      </div>
      
      <div className="sidebar-footer">
        <p>© {new Date().getFullYear()} 情报采集监控系统</p>
      </div>
    </aside>
  );
};

export default Sidebar; 